<template>
<!-- 收藏路由 -->
  <div class="LoveBox" >
    <van-nav-bar
      left-text="我的收藏"
      :fixed="true"
      :placeholder="true"
    />
    <ul v-if="favorite.length">
        <SearchCard ref="SearchCard" v-for="(item,index) in favorite" :key="index" :item="item" @click.native="$router.push({ path: '/menuDetail', query: { id: item.item_id ? item.item_id : item.id }})">
          <template v-slot:star>
            <img src="../assets/images/favorite.png" alt="" @click.stop="onclick(index)" class="fav">
          </template>
        </SearchCard>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

import SearchCard from '@/components/SearchCard.vue'
import { mapState,mapMutations } from 'vuex'
export default {
  name: 'LoveBox',
  props:["path"],
  components: {
    SearchCard,
  },
  data() {
    return {
      // fav:true,
    };
  },
  computed: {
    ...mapState(['favorite'])
  },
  methods:{
    onclick(index){
      // console.log(index);
      this.$refs.SearchCard[index].nolove();
      // this.$refs.SearchCard.nolove();
      this.favoriteReduce({index:index })
    },
    ...mapMutations(["favoriteReduce"]),
  },
}
</script>
<style lang="less">
  .LoveBox{
      ul{
        padding: 0 15px;
        padding-bottom: 50px;
      }
      .fav{
        height: 20px;
      }
    .van-nav-bar .van-icon{
        color: black;
        font-size: 20px;
      }
      /* .van-nav-bar__title{
        // margin-left: 70px;
      } */
      .van-nav-bar__content{
        height: 60px;
        .van-nav-bar__left{
          .van-nav-bar__text{
            font-size: 18px;
            color: black;
          }
        }
      }
  }
</style>